<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>心电数据 - 可穿戴心电监测平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 font-sans min-h-screen">

  <!-- 顶部导航栏 -->
  <header class="bg-blue-600 text-white p-4 flex justify-between items-center shadow-md">
    <h1 class="text-xl font-semibold">📈 心电数据</h1>
    <a href="/logout" class="bg-white text-blue-600 px-3 py-1 rounded hover:bg-gray-100 transition">退出</a>
  </header>

  <!-- 主体布局 -->
  <div class="flex">
    <!-- 左侧导航栏 -->
    <aside class="w-64 bg-white h-screen shadow-md p-5">
      <nav class="space-y-3">
        <a href="/ecg" class="block p-3 rounded bg-blue-100 text-blue-600 font-medium">
          📊 心电数据
        </a>
      </nav>
    </aside>

    <!-- 右侧内容 -->
    <main class="flex-1 p-8">
      {% if not device_id %}
        <!-- 设备选择页 -->
        <h2 class="text-2xl font-semibold text-blue-600 mb-6">请选择设备</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {% for d in devices %}
          <a href="/ecg/{{ d.device_id }}"
             class="bg-white rounded-xl p-5 shadow hover:shadow-lg transition block">
            <h3 class="text-gray-800 font-semibold text-lg">{{ d.name }}</h3>
            <p class="text-gray-500 text-sm mt-1">编号：{{ d.device_id }}</p>
          </a>
          {% endfor %}
        </div>

      {% else %}
        <!-- 心电记录列表页 -->
        <h2 class="text-2xl font-semibold text-blue-600 mb-6">
          设备 {{ device_id }} 的心电记录
        </h2>

        {% if records|length == 0 %}
          <p class="text-gray-500 text-center mt-10">暂无心电记录数据。</p>
        {% else %}
          <div class="bg-white rounded-xl shadow overflow-hidden">
            <table class="min-w-full border-collapse text-left">
              <thead class="bg-blue-50">
                <tr>
                  <th class="px-4 py-2">记录ID</th>
                  <th class="px-4 py-2">开始时间</th>
                  <th class="px-4 py-2">结束时间</th>
                  <th class="px-4 py-2 text-right">操作</th>
                </tr>
              </thead>
              <tbody>
                {% for r in records %}
                <tr class="border-b hover:bg-gray-50">
                  <td class="px-4 py-2">{{ r.id }}</td>
                  <td class="px-4 py-2">{{ r.start_time }}</td>
                  <td class="px-4 py-2">{{ r.end_time or "进行中" }}</td>
                  <td class="px-4 py-2 text-right">
                    <a href="/ecg/view/{{ r.id }}"
                       class="text-blue-600 hover:underline">查看</a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      {% endif %}
    </main>
  </div>

  <!-- 🔙 固定右下角返回按钮 -->
  <a href="/"
     class="fixed bottom-6 right-6 bg-blue-600 text-white px-5 py-2 rounded-full shadow-lg hover:bg-blue-700 transition duration-200 z-50">
    🔙 返回主页面
  </a>

</body>
</html>
